<template>
  <el-table
    :data="goodsList"
    max-height="600"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      type="index"
      label="序号"
      width="55"
      :index="indexMethod"
      align="center"
    />
    <el-table-column
      show-overflow-tooltip
      prop="id"
      label="商品编号"
      align="center"
    >
      <template #default="scope">
        <el-tag> {{ scope.row.id }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="src" label="商品图片" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.src"
            fit="fill"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="skuName" label="商品名称" align="center" />
    <el-table-column prop="skuPrice" label="商品价格" align="center" />
    <el-table-column prop="skuOldPrice" label="商品原价" align="center" />
    <el-table-column prop="skuCategory" label="商品类别" align="center">
      <template #default="scope">
        <div v-for="v in category" :key="v.id">
          {{ v.id == scope.row.skuCategory ? v.skuCategoryName : "" }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="skuStocks" label="商品库存" align="center" />
    <el-table-column prop="skuStatus" label="商品状态" align="center">
      <template #default="scope">
        <div v-if="scope.row.skuStatus == 1">
          <el-tag type="success" effect="dark">已上架</el-tag>
        </div>
        <div v-if="scope.row.skuStatus == 2">
          <el-tag type="warning" effect="dark">未上架</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="skuDesc" label="商品描述" align="center" />

    <!-- 按钮组 -->
    <el-table-column
      fixed="right"
      prop="skuStatus"
      label="操作"
      width="200"
      align="center"
    >
      <template #default="scope">
        <el-button
          type="primary"
          @click="handleGoods(scope.row, 1)"
          v-if="scope.row.skuStatus == 2"
          link
          style="color: green"
          ><el-icon style="color: green"><Upload /></el-icon>
          上架
        </el-button>
        <el-button
          type="primary"
          @click="handleGoods(scope.row, 2)"
          v-else
          link
          style="color: #e6a23c"
          ><el-icon style="color: #e6a23c"><Download /></el-icon>
          下架
        </el-button>
        <!-- 修改 -->
        <el-button type="primary" @click="editGoods(scope.row)" link
          ><el-icon><EditPen /></el-icon>修改</el-button
        >
        <!-- 删除 -->
        <el-button
          type="primary"
          @click="deleteGoods(scope.row, scope.row.id)"
          link
        >
          <el-icon><Delete /></el-icon>删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <goodsDialog ref="dialog"></goodsDialog>
</template>

<script lang="ts" setup>
import goodsDialog from "./goodsDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, computed } from "vue";
// 引入store
import { useStore } from "vuex";
const store = useStore();
const props = defineProps(["goodsList"]); //接收父组件传入的数据
const emit = defineEmits(["getChildSelection", "getData"]);
const dialog = ref(); //对话框组件ref属性

console.log(props.goodsList);

// 存放已勾选的数据
const multipleSelection = ref([]);

let category = computed(() => store.getters["category/categoryList"]);

// 序号
const indexMethod = (index: number) => {
  return index + 1;
};

// 修改
const editGoods = (sku: any) => {
  // 判断商品是否上架
  if (sku.skuStatus == 1) {
    return ElMessage({
      showClose: true,
      type: "warning",
      message: `“${sku.skuName}”是已上架商品，不能修改!`
    });
  }
  dialog.value.openDialog("修改商品", sku); //打开窗口
};

// 删除
const deleteGoods = (sku: any, skuId: any) => {
  ElMessageBox.confirm(`是否删除商品名称为“${sku.skuName}”的商品`, "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      // 判断商品是否上架
      if (sku.skuStatus == 1) {
        return ElMessage({
          showClose: true,
          type: "error",
          message: `“${sku.skuName}”是已上架商品，不能删除!`
        });
      }
      // 发请求删除商品
      try {
        await store.dispatch("goods/deleteGoods", skuId);
        emit("getData");
        ElMessage({
          showClose: true,
          type: "success",
          message: `商品“${sku.skuName}”已被删除`
        });
      } catch (error) {
        ElMessage({
          showClose: true,
          type: "error",
          message: error.message
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

// 上下架(上架或下架成功后重新获取数据)
const handleGoods = async (sku: any, status: any) => {
  try {
    let res = await store.dispatch("goods/upStatus", { id: sku.id, status });
    if (res) {
      emit("getData");
      ElMessage({
        showClose: true,
        message: `名称为“${sku.skuName}”的商品${
          status == 1 ? "已成功上架！" : "已成功下架！"
        }`,
        type: `${status == 1 ? "success" : "warning"}`
      });
    }
  } catch (error) {
    ElMessage({
      showClose: true,
      message: `操作失败`,
      type: "error"
    });
  }
};

// 复选框监听函数
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  emit("getChildSelection", multipleSelection.value); //将数据返回父组件
};
</script >

<style>
</style>